<template>
	<rootWithStateBarLayout :rightToolBarData="toolDataList" @onToolItemClick="onToolItemClick"
		:rightToolBarBgColor="toolBarBgColor">
		<view slot="pageContent" class="content-lay">
			<view class="header flex-h">
				<view class="header-person">{{$t('login.checker')}}：{{userInfo ? userInfo.txt_value : '--'}}</view>
				<view class="header-time">{{currentTimeStr}}</view>
			</view>

			<view class="entry-tab">
				<selectTab style="background-color: #fff;" :dataList="tabDataList" @onTabSelect="onTabSelect" />
			</view>

			<view class="sync_lay flex-h" v-if="showSyncLay">
				<view class="sync_btn">{{$t('functionSelect.syncLay.toLocal')}}</view>
				<view class="sync_btn">{{$t('functionSelect.syncLay.toServer')}}</view>
				<view class="sync_btn">{{$t('functionSelect.syncLay.toRemove')}}</view>
			</view>

			<view class="table-lay">
				<vTable class="data-table" ref="table" :columns="tableHeadData" :list="tableContentData"
					selection="single" @on-selection-change="onTableSelect" :height="tableHeight" :td-height="40"
					border-color="#DEDEDE"
					:th-td-height="40" rowClassName="rowClassName"/>

			</view>
		</view>
		
		<view slot="popupContent">
			<hqs-popup title="弹窗标题" v-model="showSyncLoginPopup" from="right" :width="syncLooginPopWidth" height="80vh">
				<syncLoginView @onBtnClick="onSyncBtnClick"></syncLoginView>
			</hqs-popup>
		</view>
	</rootWithStateBarLayout>
</template>

<script>
	import selectData from "@/common/function_select_data.js";
	import dateUtil from "@/utils/date.js";
	import selectTab from "./_components/selectTab.vue";
	import dataTable from "./_components/dataTable.vue";
	import wybTable from '@/components/wyb-table/wyb-table.vue';
	import vTable from "@/components/table.vue";
	import hqsPopup from '@/components/hqs-popup/hqs-popup';
	import syncLoginView from "@/_components/syncLoginView.vue"

	import rootWithStateBarLayout from "@/_components/rootWithStateBarLayout.vue"

	import {
		requireThickPlantData
	} from "@/localService/thickService.js";

	import {
		requireVisualPlantData
	} from "@/localService/visualService.js";

	import {
		requireCodeIspRstData
	} from "@/localService/visualCheckParamsService.js";
	// requireCodeIspRstData

	import {
		mapState,
		mapMutations
	} from 'vuex';

	export default {
		data() {
			let _self = this;
			return {
				tableHeight: 600,
				tableHeadData: [{
					key: "index",
					title: _self.$t("functionSelect.tableHeadIndex"),
					$width: "100rpx"
				}, {
					key: "plt_name",
					title: _self.$t("functionSelect.tableHeadPlant"),
					$width: "370rpx"
				}, {
					key: "macTypeStr",
					title: _self.$t("functionSelect.tableHeadMacType"),
					$width: "150rpx"
				}, {
					key: "getDate",
					title: _self.$t("functionSelect.tableHeadGetDate"),
					$width: "200rpx"
				}, {
					key: "status",
					title: _self.$t("functionSelect.tableHeadStatus"),
					$width: "130rpx"
				}, {
					key: "sendDate",
					title: _self.$t("functionSelect.tableHeadSendDate"),
					$width: "200rpx"
				}],

				currentTimeStr: "--:--",
				intervalImpl: null,
				tabDataList: selectData.entryData,
				toolDataList: selectData.toolEntry,
				selectTabIndex: 0,

				selectTableData: null,
				tableContentData: selectData.tableData,
				toolBarBgColor: '',

				thickPlantList: [],
				visualPlantList: [],
				thickPlantShowList: [],
				visualPlantShowList: [],
				
				// sync lay
				showSyncLay: false,
				showSyncLoginPopup: false,
				syncLooginPopWidth: "40vw",
			}
		},

		computed: {
			...mapState(['userInfo'])
		},

		components: {
			selectTab,
			dataTable,
			wybTable,
			vTable,
			rootWithStateBarLayout,
			syncLoginView
		},

		onReady() {
			this.showSyncLay = getApp().globalData.isUnlockSync;
			this.toolBarBgColor = this.tabDataList[this.selectTabIndex].backColor;
			this.refreshTableHeight();
			
			this.requireThickPlantDataApi();
			this.requireVisualPlantDataApi();
			this.requireCodeIspRstDataApi();
		},

		beforeDestroy() {
			clearInterval(this.intervalImpl);
		},
		
		watch:{
			showSyncLay(val) {
				this.toolDataList[0].forEach(e => {
					if (e.type == "lock")
						e.image = val ?
						"/static/imgs/tools/icon_menu_open@2x.png" :
						"/static/imgs/tools/icon_menu_lock@2x.png";
				})
			}
		},

		methods: {
			...mapMutations(["setSelectInfo"]),
			
			refreshTableHeight() {
				let _this = this;				
				this.intervalImpl = setInterval(function() {
					_this.currentTimeStr = dateUtil.getDate(Date.parse(new Date()), "minute");
				}, 1000);
				
				let view = uni.createSelectorQuery().in(this).select('.entry-tab')
				view.fields({
					size: true, //是否返回节点尺寸（width height）
					rect: true, //是否返回节点的 scrollLeft scrollTop，节点必须是 scroll-view 或者 viewport
					scrollOffset: true, //是否返回节点的 scrollLeft scrollTop，节点必须是 scroll-view 或者 viewport
				}, (res) => {
					_this.tableHeight = (uni.getSystemInfoSync().windowHeight - res.bottom - 25);
					if(_this.showSyncLay)
						_this.tableHeight -= 50;
				}).exec();
			},
			
			onTabSelect(e) {
				this.selectTabIndex = e;
				this.toolBarBgColor = this.tabDataList[e].backColor;

				if (e == 0)
					this.tableContentData = this.thickPlantShowList;
				else if (e == 1)
					this.tableContentData = this.visualPlantShowList;
			},

			onTableSelect(e) {
				console.log(e)
				this.selectTableData = e.new.item;
			},

			onToolItemClick(e) {
				let _self = this;
				switch (e) {
					case "go":
						if (this.selectTableData == null) {
							uni.showToast({
								title: "请选择一个条目",
								icon: "none"
							})
							return;
						}
						let tempUrl = this.selectTabIndex == 0 ? "/pages/thickness/thicknessIndex?" :
							"/pages/visual/visualIndex?";
						tempUrl += "plt_name=" + this.selectTableData.plt_name;
						tempUrl += "&macType=" + this.selectTableData.macType;

						this.setSelectInfo({
							plt_name: this.selectTableData.plt_name,
							macType: this.selectTableData.macType,
							macTypeStr: this.selectTableData.macTypeStr,
						});

						console.log(e)
						uni.navigateTo({
							url: tempUrl
						})
						console.log("go go go");
						break;
					case "lock":
						console.log("lock");
						
						if(this.showSyncLay) {
							console.log("退出sync")
							this.showSyncLay = false;
							this.refreshTableHeight();
						} else {
							this.showSyncLoginPopup = true;
						}
						

						break;
					case "exit":
						console.log("exit");
						uni.redirectTo({
							url: "/pages/login/login"
						})
						break;
				}
			},

			requireCodeIspRstDataApi() {
				let _self = this;
				requireCodeIspRstData().then(e => {
					console.log("requireCodeIspRstDataApi --- re")
					console.log(e)
					getApp().globalData.ispRstPickerArray = e;
				})
			},

			requireThickPlantDataApi() {
				let _self = this;
				requireThickPlantData().then(e => {
					_self.thickPlantList = e;
					_self.genThickShowList();
					if (_self.selectTabIndex == 0)
						_self.tableContentData = _self.thickPlantShowList;
				})
			},

			requireVisualPlantDataApi() {
				let _self = this;
				requireVisualPlantData().then(e => {
					console.log("requireVisualPlantDataApi  ----  re")
					console.log(e)
					_self.visualPlantList = e;
					_self.genVisualShowList();
					if (_self.selectTabIndex == 1)
						_self.tableContentData = _self.visualPlantShowList;
				})
			},


			genThickShowList() {
				this.thickPlantShowList = [];
				for (let i = 0; i < this.thickPlantList.length; i++) {
					let temp = {};
					temp.index = i * 2 + 1;
					temp.plt_name = this.thickPlantList[i].plt_name;
					temp.macType = 1;
					temp.macTypeStr = this.$t(`public.macTypeStr[${temp.macType}]`);
					temp.getDate = "2021-7-21";
					temp.sendDate = "2021-7-21";
					let temp1 = {};
					temp1.index = i * 2 + 2;
					temp1.plt_name = this.thickPlantList[i].plt_name;
					temp1.macType = 2;
					temp1.macTypeStr = this.$t(`public.macTypeStr[${temp1.macType}]`);
					temp1.getDate = "2021-7-21";
					temp1.sendDate = "2021-7-21";

					this.thickPlantShowList.push(temp);
					this.thickPlantShowList.push(temp1);
				}

				console.log(this.thickPlantShowList)
			},

			genVisualShowList() {
				this.visualPlantShowList = [];
				for (let i = 0; i < this.visualPlantList.length; i++) {
					let temp = {};
					temp.index = i * 2 + 1;
					temp.plt_name = this.visualPlantList[i].plt_name;
					temp.macType = 1;
					temp.macTypeStr = this.$t(`public.macTypeStr[${temp.macType}]`);
					temp.getDate = "2021-7-21";
					temp.sendDate = "2021-7-21";

					let temp1 = {};
					temp1.index = i * 2 + 2;
					temp1.plt_name = this.visualPlantList[i].plt_name;
					temp1.macType = 2;
					temp1.macTypeStr = this.$t(`public.macTypeStr[${temp1.macType}]`);
					temp1.getDate = "2021-7-21";
					temp1.sendDate = "2021-7-21";

					this.visualPlantShowList.push(temp);
					this.visualPlantShowList.push(temp1);
				}
			},
			
			onSyncBtnClick(e) {
				this.showSyncLoginPopup = false;
				if(e) {
					this.showSyncLay = true;
				}
				this.refreshTableHeight();
			}
		}
	}
</script>

<style lang="scss">
	.rowClassName {
		font-size: 14rpx;
		color: #666666;
	}
	
	.header {
		// background-color: #f8f8f8;
		box-sizing: border-box;
		padding: 12rpx 0rpx;
		align-items: center;
		justify-content: space-between;

		.header-person {
			font-size: 14rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 700;
			color: #1F2329;
		}

		.header-time {
			box-sizing: border-box;
			padding: 0rpx 9rpx;
			font-size: 25rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #00FF00;
			background-color: #000000;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}

	.content-lay {
		background: #ffffff;
		width: 100%;
		box-sizing: border-box;
		padding: 0 16rpx;
	}

	.entry-tab {
		box-sizing: border-box;
		padding: 10rpx 100rpx;
	}

	.table-lay {
		width: 100%;

		.data-table {
			width: calc(100%);
			height: 100%;
			padding: 10upx;
		}
	}

	.sync_lay {
		padding: 5rpx 10rpx;
		align-items: center;
		
		.sync_btn {
			padding: 5rpx 10rpx;
			background: #FFFFFF;
			border-radius: 2px;
			border: 1px solid #0062B0;
			color: #0062B0;
			margin-right: 20rpx;
		}
	}
</style>
